import CmmnModeler from 'cmmn-js/lib/Modeler'
import propertiesPanelModule from 'cmmn-js-properties-panel'
import propertiesProviderModule from 'cmmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-cmmn-moddle/resources/camunda'
import { getProgressModel, updateProgressModel } from '@/api/model'

export default {
  data () {
    return {
      xmlData: '',
      progressModel: null,
      cmmnModeler: null,
      container: null,
      canvas: null
    }
  },
  created () {
    this.setInitData()
  },
  methods: {
    setInitData () {
      // 现获取模型数据，再打开模拟器
      const thisModelId = this.$route.query.modelId
      getProgressModel({
        modelId: thisModelId
      }).then(response => {
        // 获取到模型，允许修改
        if (response.code == 20000) {
          this.progressModel = response.data
	    			this.xmlData = this.progressModel.xmlData
        }
        this.setModeler()
	        }).catch(error => {
	        	// 未获取到模型，允许导出
	        	this.setModeler()
	        })
    },
    setModeler () {
      // 获取到属性ref为“content”的dom节点
      this.container = this.$refs.content
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模，官方文档这里讲的很详细
      this.cmmnModeler = new CmmnModeler({
        container: canvas,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 左边工具栏以及节点
          propertiesProviderModule,
          // 右边的工具栏
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })
      this.openDiagram(this.cmmnModeler)
    },
    saveDiagram () {
      const _this = this
      this.cmmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err && xml != null && xml != '') {
          return console.error('无法保存CMMN 2.0流程图', err)
        }
        updateProgressModel({
          modelId: _this.progressModel.modelId,
          xmlData: xml
        }).then(() => {
		            // 刷新模型列表数据
		            _this.$notify({
		              title: '成功',
		              message: '保存成功',
		              type: 'success',
		              duration: 2000
		            })
		        })
      })
    },
    exportDiagram () {
      console.log('点击保存CMMN流程图')
      this.cmmnModeler.saveXML({
        format: true
      }, function (err, xml) {
        if (err) {
          return console.error('无法保存CMMN 2.0流程图', err)
        }
        var a = document.createElement('a')
        a.setAttribute('href',
          'data:application/cmmn20-xml;charset=UTF-8,' + xml)
        a.setAttribute('download', 'my_cmmn.cmmn')
        a.click()
      })
    },
    openDiagram (cmmnModeler) {
      let cmmnXmlStr = ''
      if (this.xmlData == null || this.xmlData == '') {
        cmmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
				'<cmmn:definitions xmlns:dc="http://www.omg.org/spec/CMMN/20151109/DC" xmlns:cmmndi="http://www.omg.org/spec/CMMN/20151109/CMMNDI" xmlns:cmmn="http://www.omg.org/spec/CMMN/20151109/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_02xmelg" targetNamespace="http://bpmn.io/schema/cmmn" exporter="Camunda Modeler" exporterVersion="3.4.1">\n' +
	  			'<cmmn:case id="Case_1cozor9">\n' +
	    		'<cmmn:casePlanModel id="CasePlanModel_0ln15ek" name="A CasePlanModel">\n' +
	      		'<cmmn:planItem id="PlanItem_1" definitionRef="Task_1" />\n' +
	      		'<cmmn:task id="Task_1" />\n' +
	    		'</cmmn:casePlanModel>\n' +
	  			'</cmmn:case>\n' +
	  			'<cmmndi:CMMNDI>\n' +
	  			'<cmmndi:CMMNDiagram id="init_cmmn_id" name="init_cmmn_name">\n' +
	  			'<cmmndi:Size width="500" height="500" />\n' +
	  			'<cmmndi:CMMNShape id="DI_CasePlanModel_0ln15ek" cmmnElementRef="CasePlanModel_0ln15ek">\n' +
				'<dc:Bounds x="154" y="99" width="534" height="389" />\n' +
				'<cmmndi:CMMNLabel />\n' +
				'</cmmndi:CMMNShape>\n' +
				'<cmmndi:CMMNShape id="PlanItem_1_di" cmmnElementRef="PlanItem_1">\n' +
				'<dc:Bounds x="190" y="132" width="100" height="80" />\n' +
				'<cmmndi:CMMNLabel />\n' +
				'</cmmndi:CMMNShape>\n' +
				'</cmmndi:CMMNDiagram>\n' +
				'</cmmndi:CMMNDI>\n' +
				'</cmmn:definitions>\n'
      } else {
        cmmnXmlStr = this.xmlData
      }
      cmmnModeler.importXML(cmmnXmlStr, function (err) {
        if (err) {
          return console.error('无法导入CMMN 2.0流程图', err)
        }
        const canvas = cmmnModeler.get('canvas')
        canvas.zoom('fit-viewport')
        canvas.addMarker('init_cmmn_id')
      })
    }
  },
  mounted () {

  }
}
